<template>
  <div clas="xima">
    <header>
      <ol class="breadcrumb">
        <li><router-link to="/ProductDescription">成本管理</router-link></li>
        <li><router-link to="/PerformanceApp">绩时查APP</router-link></li>
      </ol>
    </header>
    <div class="ximacontent">
      <div class="row">
        <div class="col-xs-12 col-md-8">
            <div class="content1">
                 <div class="performance1">
                     <div class="perTitle">
                         <h3>绩效知识</h3>
                     </div>
                     <ul>
                         <li>提供与绩效指标计算、填报过程中的问题解答，供全国医院、绩效专家参与答疑互动的环境，方式可以有图文、语音、文件等。</li>
                     </ul>
                 </div>
                 <div class="performance2">
                    <div class="perTitle">
                         <h3>线上咨询</h3>
                     </div>
                     <ul>
                         <li>线上远程指导，与图文、语音、视频等方式开展。 提高沟通效率，保障服务质量。</li>
                     </ul>
                 </div>
                 <div class="performance3">
                     <div class="perTitle">
                         <h3>消息推送</h3>
                     </div>
                     <ul>
                         <li>提供各类通知到达提醒，行业新闻、案例分享、专家观点三类信息获取。 用户只需在手机端即可掌控动态进展，获取最新资讯与专家指导，提高沟通效率</li>
                     </ul>
                 </div>
            </div>
        </div>
        <div class="col-xs-6 col-md-4">
          <div class="guide">
            <div class="guideTop">
              <ul>
                <li><router-link to="/ProductDescription">产品概述</router-link></li>
                <hr class="simple" color="#6f5499" />
                 <li><router-link to="/ProductSystem">产品体系</router-link></li>
                <hr class="simple" color="#6f5499" />
                <li><router-link to="/research">流感监测上报</router-link></li>
                 <hr class="simple" color="#6f5499" />
                <li><router-link to="/PerformanceApp">绩时查APP</router-link></li>
              </ul>
            </div>
            <hr
              style="filter: alpha(opacity=100,finishopacity=0,style=2)"
              width="80%"
              color="#6f5499"
              size="10"
            />
            <div class="guideTip">
              <p class="connect_h">联系我们</p>
              <div><span>电话：861068005755,861068006083</span></div>
              <div><span>Email: xmbj2005@163.com</span></div>
              <div><span>邮箱: 492800904@qq.com</span></div>
              <div>
                <span>地址: 北京市西城区西直门外大街18号金贸大厦A座935</span>
              </div>
              <p>
                <img src="../assets/code.jpg" alt="" />
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.performance1,.performance2,.performance3{
            border:1px solid #0a770a;
            background: #0a77a0;
            color:#fff;
            margin-bottom:1.25rem /* 20/16 */;
       }
       .performance1 .perTitle h3,.performance2 .perTitle h3,.performance3 .perTitle h3{
            text-align:center;
       }
       .performance1 ul li,.performance2 ul li,.performance3 ul li{
           letter-spacing:.25rem /* 4/16 */;
           line-height:1.875rem /* 30/16 */;
           padding:1.25rem /* 20/16 */;
       }
    .guide {
        width: 100%;
    }
    
    .guideTop {
        background-color: #0a77a0;
        margin-bottom: 1.75rem/* 30/
        16 */
        ;
    }
    
    .guideTop ul {
        list-style-type: none;
    }
    
    .guideTop ul li {
        margin-top: 0.625rem/* 10/16 */
        ;
        height: 2.5rem/* 40/16 */
        ;
        line-height: 2.5rem/* 40/16 */
        ;
        overflow: hidden;
        /*解决高度设置无效的问题*/
    }
    
    .guideTop ul li a {
        color: #fff;
    }
    
    .guideTip .connect_h {
        font-size: 20px;
    }
    
    .guideTip div {
        white-space: nowrap;
    }
    
    .guideTip div span {
        word-break: break-all;
    }
    /* 中等屏幕（桌面显示器，大于等于 992px） */
    
    @media screen and (min-width: 992px) {
       .content1{
           display:flex;
       }
       .performance1,.performance2,.performance3{
            border:1px solid #0a770a;
            margin-right:1.25rem /* 20/16 */;
            background: #0a77a0;
            color:#fff;
            width:33.33%;
       }
       .performance1 .perTitle h3,.performance2 .perTitle h3,.performance3 .perTitle h3{
            text-align:center;
       }
       .performance1 ul li,.performance2 ul li,.performance3 ul li{
           letter-spacing:.25rem /* 4/16 */;
           line-height:1.875rem /* 30/16 */;
           padding:1.25rem /* 20/16 */;
       }
        .guideTop {
            background-color: #0a77a0;
            margin-bottom: 1.8 75rem;
        }
        .guideTop ul li {
            margin-top: 0.625rem/* 10/16 */
            ;
            height: 2.5rem/* 40/16 */
            ;
            line-height: 2.5rem/* 40/16 */
            ;
            overflow: hidden;
        }
        .guideTip div {
            height: 30px;
        }
        .guideTop div span {
            word-break: break-all;
            word-wrap: break-word;
        }
        .substance {
            width: 100%;
        }
        .substance2,
        .substance3,
        .substance4 {
            float: left;
            width: calc(100% / 3);
        }
        .substance2 {
            border-right: 1px solid #ccc;
        }
        .substance4 {
            border-right: 1px solid #ccc;
        }
        .substance2 p:first-letter {
            font-size: 60px;
            float: left;
            padding-right: 6px;
            font-weight: bold;
            font-family: 黑体;
            color: #0a77a0;
        }
        .substance2 p {
            letter-spacing: 4px;
        }
        .substance3 img {
            text-align: center;
            margin: 0 auto;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
        .substance4 .areas {
            font-size: 20px;
        }
        .substance4 p {
            font-size: 14px;
            letter-spacing: 4px;
            line-height: 25px;
        }
    }
</style>